給想要看成品，但很懶的一篇一篇摳的人～

Home.vue

<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<template>
<v-app id="inspire">
    <v-main>
        <v-container class="fill-height" fluid>
            <v-row align="center" justify="center">
                <v-col cols="12" sm="8" md="10">
                    <v-card class="elevation-12">
                        <v-toolbar color="primary" dark flat>
                            <v-toolbar-title>Login form</v-toolbar-title>
                            <v-spacer></v-spacer>
                            <v-tooltip bottom>

                                <span>Source</span>
                            </v-tooltip>
                        </v-toolbar>
                        <error v-if="error" />
                        <v-card-text>
                            <v-form>
                                <v-text-field v-model="email" label="email" name="email" prepend-icon="mdi-email" type="text"></v-text-field>

                                <v-text-field v-model="password" id="password" label="Password" name="password" prepend-icon="mdi-lock" type="password"></v-text-field>
                            </v-form>
                        </v-card-text>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="success" v-on:click="$router.push({name:'register'})">Register</v-btn>
                            <v-btn color="primary" v-on:click="login()">Login</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </v-main>
</v-app>
</template>

<script>
/*eslint-disable*/
import error from "../components/error.vue";
export default {
    props: {
        source: String,

    },
    components: {
        error
    },
    data: () => ({
        email: "",
        password: "",
        error: false,
    }),
    methods: {

        login() {
            const vm = this;
            vm.axios.post('http://localhost:8000/api/login', {
                    email: vm.email,
                    password: vm.password
                }, {
                    headers: {
                        Accept: 'application/json',
                    }

                })
                .then(function (response) {
                    vm.error = false;
                    console.log(response);
                    localStorage.setItem("item", response.data.token);
                    vm.$router.push('/about/1');
                })
                .catch(function (response) {

                    vm.error = true;
                })

        }
    }
}
</script>

Register.vue

<template>
<v-app id="inspire">
    <v-main>
        <v-container class="fill-height" fluid>
            <v-row align="center" justify="center">
                <v-col cols="12" sm="8" md="10">
                    <v-card class="elevation-12">
                        <v-toolbar color="primary" dark flat>
                            <v-toolbar-title>Register</v-toolbar-title>
                            <v-spacer></v-spacer>
                            <v-tooltip bottom>

                                <span>Source</span>
                            </v-tooltip>
                        </v-toolbar>
                        <v-card-text>
                            <v-form>
                                <v-text-field v-model="login" label="Login" name="login" prepend-icon="mdi-account" type="text"></v-text-field>
                                <v-text-field v-model="email" label="email" name="email" prepend-icon="mdi-email" type="text"></v-text-field>

                                <v-text-field v-model="password" id="password" label="Password" name="password" prepend-icon="mdi-lock" type="password"></v-text-field>
                            </v-form>
                        </v-card-text>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn v-on:click="register()" color="primary">register</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </v-main>
</v-app>
</template>

<script>
export default {

    props: {
        source: String,

    },
    data: () => ({
        login: "",
        email: "",
        password: "",

    }),
    methods: {

        register() {
            const vm = this;
            vm.axios.post('http://localhost:8000/api/register', {
                    name: vm.login,
                    email: vm.email,
                    password: vm.password
                }, {
                    headers: {
                        Accept: 'application/json',
                    }

                })
                .then(function (response) {
                    vm.error = false;
                    console.log(response);
                    localStorage.setItem("item", response.data.token);
                    vm.$router.push('/about/1');
                })

        }
    }
}
</script>

About.vue

<template>
<div id="app">
    <v-app id="inspire" class="xxx">

        <v-app-bar app clipped-left color="teal lighten-3" dense>
            <v-icon left>{{ icons.mdiShareVariant }}</v-icon>
            <div class="mx-4"></div>
            <v-icon class="mx-4" large>
            </v-icon>

            <v-toolbar-title class="mr-12 align-center">
                <span class="font-weight-thin font-italic display-1">BlogeR</span>
            </v-toolbar-title>

            <v-spacer>

            </v-spacer>

            <v-btn icon style="right:20px" v-on:click="logout()">
                <v-icon> logout</v-icon>
            </v-btn>
            <div class="mx-24"></div>
        </v-app-bar>

        <v-main>

            <v-carousel>

                <router-view />
                <v-carousel-item v-for="(it,i) in its" :key="i" :src="it.src"></v-carousel-item>
            </v-carousel>
            <v-container v-bind="{ [`grid-list-lg`]: true }" fluid>
                <v-layout row wrap>
                    <v-flex v-for="n in 9" :key="n" xs4>
                        <v-card flat tile>
                            <v-img :src="`https://unsplash.it/150/300?image=${Math.floor(Math.random() * 200) + 1}`" height="150px"></v-img>
                        </v-card>
                    </v-flex>
                </v-layout>
            </v-container>
        </v-main>
    </v-app>

</div>
</template>

<script>
import {
    mdiAccount,
    mdiPencil,
    mdiShareVariant,
    mdiDelete,
} from '@mdi/js'
export default {
    props: {
        source: String,
    },
    methods: {

        logout() {
            const vm = this;
            localStorage.clear();
            vm.$router.push('/');

        }
    },
    data: () => ({

        its: [{
                src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
            },
            {
                src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
            },
            {
                src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
            },
            {
                src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
            }
        ],
        icons: {
            mdiAccount,
            mdiPencil,
            mdiShareVariant,
            mdiDelete,
        },
        drawer: null,
        items: [{
                icon: 'mdi-trending-up',
                text: 'Most Popular'
            },
            {
                icon: 'mdi-youtube-subscription',
                text: 'Subscriptions'
            },
            {
                icon: 'mdi-history',
                text: 'History'
            },
            {
                icon: 'mdi-playlist-play',
                text: 'Playlists'
            },
            {
                icon: 'mdi-clock',
                text: 'Watch Later'
            },
        ],
        items2: [{
                picture: 28,
                text: 'Joseph'
            },
            {
                picture: 38,
                text: 'Apple'
            },
            {
                picture: 48,
                text: 'Xbox Ahoy'
            },
            {
                picture: 58,
                text: 'Nokia'
            },
            {
                picture: 78,
                text: 'MKBHD'
            },
        ],
    }),
    created() {
        this.$vuetify.theme = true
    },
}
</script>

error.vue

<template>
<div>
    <v-alert type="error">
        I'm an error alert.
    </v-alert>
</div>
</template>

<script>
export default {
    name: 'HelloWorld'

}
</script>

1.vue

<template>
<div>
    <v-alert style="top:8px" v-model="alert" dismissible close-icon="mdi-delete" border="left" elevation="2" outlined type="success" text>
        Welcome back BlogeR ! Now you can see upgrade photo ~
    </v-alert>

</div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            alert: true,
        }
    },
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap'
import jQuery from 'jquery'
import BootstrapVue from 'bootstrap-vue'
window.$ = window.jQuery = jQuery
Vue.use(BootstrapVue)

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.prototype.axios = axios;
Vue.use(VueAxios,axios)

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')